<template>
  <div>
    <common-header :headNav="headNav"></common-header>
    <div class="wrap">
      <div class="w1200 pt20">
        <div class="sel_direction">选择方向：
          <div class="sel_dr_bg">{{subjectName}} <img style="width: 18px"
              src=""
              class="sel_dr_down">
            <div class="modular_dt">
              <div class="mo_dt_box " v-on:click="clickSubLevel1(subjectDown.id)" v-bind:class="{'mo_dt_sel' :subLevel1Active == subjectDown.id}" v-for="subjectDown in subjectExamTree" :key="subjectDown.id">{{subjectDown.title}}</div>
            </div>
          </div>
        </div>
        <div class="subject"  v-for="subjectChren in subjectLevel2" :key="subjectChren.id">
          <div class="sj_box" v-on:click="clickSubLevel2(subjectChren.id)"  v-bind:class="{'sj_box_bg' :subjectChren.id == subLevel2Active}">{{subjectChren.title}}</div>
        </div>
        <div class="clear"></div>
      </div>
    </div>
      <div class="w1200">
        <div class="home_u">

          <div class="home_u_box" v-for="paperType in paperTypeList" :key="paperType.id">
            <div style="padding: 0px 35px; text-align: center;"><img :src="paperType.img" class="home_b_img">
              <p class="home_title">{{ paperType.title }}</p>
              <div class="home_sh"><p class="home_br">{{ paperType.describtion }}</p></div>
              <router-link target="_blank" :to="{path:'/exam/examList',query:{examType:paperType.id,subLevel1:subLevel1Active,subLevel2:subLevel2Active}}">
              <div class="btn_home">{{ paperType.buttonTitle }}</div>
              </router-link>
            </div>
          </div>

          <div class="home_u_box">
            <div v-if="isLogin" style="padding: 0px 20px;">
              <div class="u_head">
                <img  :src="studentInfo.headImg"  onerror="this.src='/static/img/user-avatar.png'" class="u_img">
                <span class="u_name">{{studentInfo.showName}}</span>
              </div>
              <p class="u_font_b" v-if="exampaper.addTime==null||exampaper.addTime==''">最近练习：暂未练习</p>
              <p class="u_font_b" v-if="exampaper.addTime!=null && exampaper.addTime!=''">最近练习：{{exampaper.addTime}}</p>
              <p class="u_font_b" v-if="exampaper.examType==null || exampaper.examType== -1"></p>
              <p class="u_font_b" v-if="exampaper.examType==1 && exampaper.examType!= -1">模拟试题-<span class="u_f_bg">{{exampaper.paperName}}</span>
              </p>
              <p class="u_font_b" v-if="exampaper.examType==2 && exampaper.examType!= -1">考前押题-<span class="u_f_bg">{{exampaper.paperName}}</span>
              </p>
              <p class="u_font_b" v-if="exampaper.examType==3 && exampaper.examType!= -1 ">历年真题-<span class="u_f_bg">{{exampaper.paperName}}</span>
              </p>
              <p class="time_s" v-if="exampaper.testTime==null || exampaper.testTime== -1">
                <span  class="float_left u_font_b"></span>
                <span class="float_right u_font_b"></span>
              </p>
              <p class="time_s" >
                <span v-if="exampaper.testTime!=null && exampaper.testTime!= -1" class="float_left u_font_b">用时:{{getTime(exampaper.testTime)}}</span>
                <span v-if="exampaper.testTime!=null && exampaper.testTime!= -1" class="float_right u_font_b">正确率：{{exampaper.accuracy}}%</span>
              </p>
              <div class="u_box">
                <div class="u_box_x" @click="toErrorList()">
                  <img src="" alt="">
                  <p class="u_box_font">错题集</p>
                </div>
                <div class="u_box_x" @click="toFav()">
                  <img src="" alt="">
                  <p class="u_box_font">收藏夹</p>
                </div>
                <div class="u_box_x" @click="toExamRecordList()">
                  <img src="" alt="">
                  <p class="u_box_font">做题记录</p>
                </div>
              </div>
            </div>
            <div v-if="isLogin == false" class="noLogin_mask">
              <div class="go_login_font">您还未登录，无法查看数据</div>
              <div class="go_login" @click="toLogin()">立即登录</div>
            </div>
          </div>
        </div>
        <div class="evaluation">
          <div class="float_left eva_left"><p class="eva_title">测评结果评估</p>
            <p class="eva_br">所有记录的汇总，综合检验学习成果</p>
            <div class="eva_su">
              <div v-if="isLogin">
                <div class="eva_cord">
                  <div class="eva_c_box"><p class="eva_b_num"><span class="eva_num_c1">{{exampaper.questionNums}}</span> 道</p>
                    <p class="eva_b_font">做题总数</p></div>
                  <div class="eva_c_box"><p class="eva_b_num"><span class="eva_num_c2">{{exampaper.questionErrorNums}}</span> 道</p>
                    <p class="eva_b_font">错题总数</p></div>
                  <div class="eva_c_box"><p class="eva_b_num"><span class="eva_num_c3">{{exampaper.paperRecordNums}}</span> 套</p>
                    <p class="eva_b_font">试卷总数</p></div>
                  <div class="eva_c_box"><p class="eva_b_num"><span class="eva_num_c4">{{exampaper.collectionQuestionNums}}</span> 道</p>
                    <p class="eva_b_font">收藏的试题</p></div>
                </div>
                <div id="seven" class="seven_echarts" _echarts_instance_="ec_1603710941535"
                     style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">

                  <div
                      style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 327px; top: 175px; pointer-events: none;">
                    2020-10-28<br><span
                      style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#c23531;"></span>0
                  </div>
                </div>
                <div class="float_left data_num">
                  <div class="data_num_box data_num_box_bg">近一周</div>
                </div>
              </div>
              <div v-if="isLogin == false" class="noLogin_mask">
                <div class="go_login_font">您还未登录，无法查看数据</div>
                <div class="go_login" @click="toLogin()">立即登录</div>
              </div>
            </div>
          </div>
        </div>
      </div>


    <common-footer></common-footer>
  </div>

</template>

<script>
import commonHeader from '@/views/common/header'
import echarts from '@/components/echars/echars'
import commonFooter from '@/views/common/footer'
import {subjectExamTree,examPaperByUserId,paperTypeList} from "@/api";
import { setStore, getStore } from '@/util/store'
import { mapGetters } from "vuex";

export default {
  name: 'examIndex',
  data() {
    return {
      headNav: "/exam/examIndex",
      exSuspendShow: true,
      subjectExamTree:getStore({ name: 'subjectExamTree' }) || [],
      subjectLevel2All:[],
      subjectLevel2:[],
      subLevel1Active:getStore({ name: 'subLevel1Active' }) || 0,
      subLevel2Active:getStore({ name: 'subLevel2Active' }) || 0,
      exampaper:[],
      subjectName:"",
      paperTypeList:[]
    }
  }, components: {
    commonHeader, commonFooter
  },
  methods: {
    toErrorList(){
      this.$router.push({ path: "/uc/examRecord", query:{active:2}});
    },
    toExamRecordList(){
      this.$router.push({ path: "/uc/examRecord", query:{active:1}});
    },
    toFav(){
      this.$router.push({ path: "/uc/courseCollection", query:{courseType:"4"}});
    },
    toLogin(){
      this.$router.push({ path: "/user/login", query:{courseType:"4"}});
    },
    getTime(s){
      //计算分钟
      //算法：将秒数除以60，然后下舍入，既得到分钟数
      var h;
      h  =   Math.floor(s/60);
      //计算秒
      //算法：取得秒%60的余数，既得到秒数
      s  =   s%60;
      //将变量转换为字符串
      h    +=    '';
      s    +=    '';
      //如果只有一位数，前面增加一个0
      h  =   (h.length==1)?'0'+h:h;
      s  =   (s.length==1)?'0'+s:s;
      return h+'分'+s+"秒";
    },
    myEcharts(){
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('seven'),'light');
      let that = this

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: ''
        },
        tooltip: {trigger: 'axis'},
        legend: {
          data:['做题总数','错题总数']
        },
        xAxis: {
          data: that.exampaper.quesData.days
        },
        yAxis: {},
        series: [{
          name: '做题总数',
          type: 'line',
          data: that.exampaper.quesData.data1
        },{
          name: '错题总数',
          type: 'line',
          data: that.exampaper.quesData.data2
        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

    },
    init(){

      paperTypeList().then(res =>{
        this.paperTypeList = res.data.data
      })
      let subLevel1 = this.$route.query.subLevel1;
      let subLevel2 = this.$route.query.subLevel2;
      if (typeof(subLevel1) == "undefined"){
        let store = getStore({ name: 'subLevel1Active' });
        if (typeof(store) != "undefined"){
          subLevel1 = store
        }
      }
      if (typeof(subLevel2) == "undefined"){
        let store = getStore({ name: 'subLevel2Active' });
        if (typeof(store) != "undefined"){
          subLevel2 = store
        }
      }
      this.subLevel1Active = subLevel1;
      this.subLevel2Active = subLevel2;
      if(this.subjectExamTree.length == 0){
        subjectExamTree().then(res =>{
          let subject2All = []
          this.subjectExamTree = res.data.data;

          setStore({ name: 'subjectExamTree', content: this.subjectExamTree,type: 'session' })
          this.subjectExamTree.forEach(subject =>{
            if (typeof(this.subLevel1Active) == "undefined"){
              this.subLevel1Active =this.subjectExamTree[0].id;
              this.subjectName=subject.title;
            }
            if (typeof(subject.children) != "undefined"){
              subject2All = subject2All.concat(subject.children)
              if(this.subLevel1Active == subject.id){
                this.subjectLevel2 = subject.children;
              }
            }
          })
          this.subjectLevel2All = subject2All;

          if (typeof(this.subLevel2Active) == "undefined"||this.subLevel2Active==0){
            this.subLevel2Active =this.subjectLevel2[0].id;
          }
          this.subjectExamTree.forEach(subject =>{
            if(this.subLevel1Active == subject.id){
              this.subjectName=subject.title;
            }
          })
        })
      }else{
        let subject2All = []
        this.subjectExamTree.forEach(subject =>{
          if (typeof(this.subLevel1Active) == "undefined"){
            this.subLevel1Active =this.subjectExamTree[0].id;
          }
          if (typeof(subject.children) != "undefined"){
            subject2All = subject2All.concat(subject.children)
            if(this.subLevel1Active == subject.id){
              this.subjectLevel2 = subject.children;
            }
          }
        })
        this.subjectLevel2All = subject2All;

        if (typeof(this.subLevel2Active) == "undefined"||this.subLevel2Active==0){
          this.subLevel2Active =this.subjectLevel2[0].id;
        }
        this.subjectExamTree.forEach(subject =>{
          if(this.subLevel1Active == subject.id){
            this.subjectName=subject.title;
          }
        })
      }

      let that = this
      setTimeout(function () {
        if(that.isLogin){
          examPaperByUserId(that.subLevel2Active).then(res=>{
            that.exampaper=res.data.data;
            that.myEcharts()
            console.log(that.exampaper)
          })
        }
      },500);
    },
    clickSubLevel1(subjectId){
      this.subLevel1Active = subjectId;
      this.subLevel2Active=0;
      setStore({ name: 'subLevel1Active', content: subjectId,type: 'session' })
      this.$router.push({ path: "/exam/examIndex",query:{subLevel1:this.subLevel1Active,subLevel2:this.subLevel2Active} });
    },
    clickSubLevel2(subjectId){
      this.subLevel2Active = subjectId;
      setStore({ name: 'subLevel2Active', content: subjectId,type: 'session' })
      this.$router.push({ path: "/exam/examIndex",query:{subLevel1:this.subLevel1Active,subLevel2:this.subLevel2Active} });
    }
  },
  computed: {
    ...mapGetters(["studentInfo","isLogin"]),
  },
  mounted: function () {
    // this.init();
  },
  watch: {
    studentInfo: {
      deep: true,
      immediate: true,
      handler(newVal){
        console.log(newVal)
        this.init();
      }
    },
  },
}
</script>

<style scoped>

</style>
